<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>FlatLab Frontend | Portfolio</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />

    <link href="css/superfish.css" rel="stylesheet">
    <link href="css/superfish-vertical.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
     <!--header start-->
    <header class="header-frontend">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="fa fa-bar"></span>
                        <span class="fa fa-bar"></span>
                        <span class="fa fa-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Flat<span>Lab</span></a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Service</a></li>
                        <li class="dropdown ">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Feature <b class=" fa fa-angle-down"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="button.html">Buttons</a></li>
                            </ul>
                        </li>
                        <li class="active"><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="price.html">Price</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li class="dropdown language">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                <img alt="" src="img/flags/us.png">
                                <span class="username">US</span>
                                <b class=" fa fa-angle-down"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><img alt="" src="img/flags/es.png"> Spanish</a></li>
                                <li><a href="#"><img alt="" src="img/flags/de.png"> German</a></li>
                                <li><a href="#"><img alt="" src="img/flags/ru.png"> Russian</a></li>
                                <li><a href="#"><img alt="" src="img/flags/fr.png"> French</a></li>
                            </ul>
                        </li>
                        <li><input type="text" placeholder=" Search" class="form-control search"></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!--header end-->

     <!--breadcrumbs start-->
     <div class="breadcrumbs">
         <div class="container">
             <div class="row">
                 <div class="col-lg-4 col-sm-4">
                     <h1>Portfolio</h1>
                 </div>
                 <div class="col-lg-8 col-sm-8">
                     <ol class="breadcrumb pull-right">
                         <li><a href="#">Home</a></li>
                         <li><a href="#">Pages</a></li>
                         <li class="active">Portfolio</li>
                     </ol>
                 </div>
             </div>
         </div>
     </div>
     <!--breadcrumbs end-->

    <!--container start-->
    <div class="container">
        <!--portfolio start-->
        <div class="gallery-container">
            <ul id="filters" class="list-unstyled">
                <li><a href="#" data-filter="*"> All</a></li>
                <li><a href="#" data-filter=".design">Design</a></li>
                <li><a href="#" data-filter=".development">Development</a></li>
                <li><a href="#" data-filter=".frontend, .dashboard">Frontend</a></li>
                <li><a href="#" data-filter=".dashboard">Dashboard</a></li>
                <li><a href="#" data-filter=".flat:not(.development)">Flat</a></li>
            </ul>
            <div id="gallery" class="col-4">

                <div class="element design development item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img1.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img1.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element frontend item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img2.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img2.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element flat item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img3.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img3.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element development flat item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img4.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img4.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element design flat item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img5.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img5.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element dashboard frontend inner-photography item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img6.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img6.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element flat dashboard design item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img7.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img7.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>
                <div class="element design development item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img1.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img1.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element design development item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img1.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img1.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element frontend item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img2.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img2.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element flat item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img3.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img3.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

                <div class="element development flat item view view-tenth" data-zlname="reverse-effect">
                    <img src="img/works/img4.jpg" alt="" />
                    <div class="mask">
                        <h2>Freshness </h2>
                        <a data-zl-popup="link" href="javascript:;">
                            <i class="fa fa-link"></i>
                        </a>
                        <a data-zl-popup="link2" class="fancybox" rel="group" href="img/works/img4.jpg">
                            <i class="fa fa-search"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <!--portfolio end-->
    </div>
    <!--container end-->

    <!--footer start-->
    <footer class="footer">
         <div class="container">
             <div class="row">
                 <div class="col-lg-3 col-sm-3">
                     <h1>contact info</h1>
                     <address>
                         <p>Address: No.28-63877 street</p>
                         <p>lorem ipsum city, Country</p>

                         <p>Phone : (123) 456-7890</p>
                         <p>Fax : (123) 456-7890</p>
                         <p>Email : <a href="javascript:;">support@vectorlab.com</a></p>
                     </address>
                 </div>
                 <div class="col-lg-5 col-sm-5">
                     <h1>latest tweet</h1>
                     <div class="tweet-box">
                         <i class="fa fa-twitter"></i>
                         <em>Please follow <a href="javascript:;">@nettus</a> for all future updates of us! <a href="javascript:;">twitter.com/vectorlab</a></em>
                     </div>
                 </div>
                 <div class="col-lg-3 col-sm-3 col-lg-offset-1">
                     <h1>stay connected</h1>
                     <ul class="social-link-footer list-unstyled">
                         <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                         <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                         <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                         <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                         <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                         <li><a href="#"><i class="fa fa-skype"></i></a></li>
                         <li><a href="#"><i class="fa fa-github"></i></a></li>
                         <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                     </ul>
                 </div>
             </div>
         </div>
     </footer>
    <!--footer end-->

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/hover-dropdown.js"></script>

    <script defer src="js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="assets/bxslider/jquery.bxslider.js"></script>


    <script src="js/superfish.js"></script>
    <script src="js/jquery.isotope.js"></script>

    <script src="js/jquery.easing.min.js"></script>
    <script src="js/link-hover.js"></script>

    <script src="assets/fancybox/source/jquery.fancybox.pack.js"></script>


     <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>



  <script>


      $(window).load(function() {
          $('[data-zlname = reverse-effect]').mateHover({
              position: 'y-reverse',
              overlayStyle: 'rolling',
              overlayBg: '#fff',
              overlayOpacity: 0.7,
              overlayEasing: 'easeOutCirc',
              rollingPosition: 'top',
              popupEasing: 'easeOutBack',
              popup2Easing: 'easeOutBack'
          });
      });

      $(window).load(function() {
          $('.flexslider').flexslider({
              animation: "slide",
              start: function(slider) {
                  $('body').removeClass('loading');
              }
          });
      });

      //    fancybox
      jQuery(".fancybox").fancybox();

      $(function() {
          var $container = $('#gallery');
          $container.isotope({
              itemSelector: '.item',
              animationOptions: {
                  duration: 750,
                  easing: 'linear',
                  queue: false
              }
          });

          // filter items when filter link is clicked
          $('#filters a').click(function() {
              var selector = $(this).attr('data-filter');
              $container.isotope({filter: selector});
              return false;
          });
      });



  </script>

  </body>
</html>
